<template>
  <div>
    <div class="Flex-page">
      <header>
        <h1>{{ title }}</h1>
        <span
          >鲜鱼榜是 2021
          年内发行出版的国内出版物按照销售量、售出速度、到货提醒量等因素综合排序，表现多抓鱼用户喜爱程度的年度榜单。</span
        >
      </header>
      <div class="recommend">
        <span class="s1">
          {{ text }}
        </span>
      </div>
    </div>
    <div class="content">
      <div>
        <div class="oc-item">
          <div class="BookItem">
            <div class="BookItem-image">
              <div class="jsx-img"></div>
            </div>
            <div class="info">
              <h3>小狗钱钱</h3>
              <p>博多舍费尔</p>
              <div class="score">
                <span> 豆瓣评分 9.1 </span>
              </div>
            </div>
          </div>
          <div class="Book-description">
            <div class="contrib-for-list">
              <div>
                <p>
                  犹豫过是否要把这一本 2002 年首次引进国内，19
                  年间不断再版的投资入门书评为多抓鱼年度鲜鱼榜的第一名。但《小狗钱钱》实至名归，它在今年找到了最多的读者。对很多读者来说，「理财」从一种模糊的焦虑变成一些实际的方法:管住不断往外掏钱消费的手，存下一部分收入用于投资，养一只日后能不断下蛋的鹅。这也反映了一种疫情持续之下普遍的心理需求:对当下的忧虑可以不变，但对未来的希望一定要有。
                  <span>
                    <button class="Button">...展开</button>
                  </span>
                </p>
              </div>
              <div class="footer-recommend">
                <div class="Flex-left">
                  <div>
                    <span class="small">
                      <img
                        src="https://img.duozhuayu.com/3903f0ac2f7011e99b8f00163e04f327.jpeg"
                        alt=""
                      />
                    </span>
                    <span>多抓鱼的推荐</span>
                  </div>
                </div>
                <div class="Flex-right"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div class="oc-item">
          <div class="BookItem">
            <div class="BookItem-image">
              <div class="jsx-img"></div>
            </div>
            <div class="info">
              <h3>刘擎西方现代思想讲义</h3>
              <p>刘擎</p>
              <div class="score">
                <span> 豆瓣评分 9.1 </span>
              </div>
            </div>
          </div>
          <div class="Book-description">
            <div class="contrib-for-list">
              <div>
                <p>
                  刘擎的作品去年在多抓鱼一共只卖了几百本，其中还有两本编著或合著。今年，刘擎凭《刘擎西方现代思想讲义》超越了多年常青的梁文道和近年当红的罗翔，跻身多抓鱼年度畅销作家的行列。翻开目录，是马克斯·韦伯、尼采、以赛亚·柏林等
                  19
                  位思想家的名字和他们提给生活和社会的种种问题。探讨思想，关注现实，知行合一。希望来年的新书里有更多这样的通识课。
                  <span>
                    <button class="Button">...展开</button>
                  </span>
                </p>
              </div>
              <div class="footer-recommend">
                <div class="Flex-left">
                  <div>
                    <span class="small">
                      <img
                        src="https://img.duozhuayu.com/3903f0ac2f7011e99b8f00163e04f327.jpeg"
                        alt=""
                      />
                    </span>
                    <span>多抓鱼的推荐</span>
                  </div>
                </div>
                <div class="Flex-right"></div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div>
        <div class="oc-item">
          <div class="BookItem">
            <div class="BookItem-image">
              <div class="jsx-img"></div>
            </div>
            <div class="info">
              <h3>从零开始的女性主义</h3>
              <p>上野千鹤子</p>
              <div class="score">
                <span> 豆瓣评分 8.9 </span>
              </div>
            </div>
          </div>
          <div class="Book-description">
            <div class="contrib-for-list">
              <div>
                <p>
                  去年以《父权制与资本主义》名列鲜鱼榜第 18
                  名的上野千鹤子，今年凭借《从零开始的女性主义》跻身年度前三。此中大概不难一窥近年来性别议题在公共空间不断增加的声量。在这本面向普通读者的女性主义入门手册里，上野千鹤子和漫画家田房永子用漫画+对话的氛围，来谈论与日常生活息息相关的女性主义话题。
                  最后一章是「女性主义是让女人坦然接受并爱上女人身份的思想」，是的，就像这本书的粉红色封面，粉红色不止是闺房气氛，粉红色也能重拳出击。
                  <span>
                    <button class="Button">...展开</button>
                  </span>
                </p>
              </div>
              <div class="footer-recommend">
                <div class="Flex-left">
                  <div>
                    <span class="small">
                      <img
                        src="https://img.duozhuayu.com/3903f0ac2f7011e99b8f00163e04f327.jpeg"
                        alt=""
                      />
                    </span>
                    <span>多抓鱼的推荐</span>
                  </div>
                </div>
                <div class="Flex-right"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <MyFooter class="myFooter" />
    <Back1/>
  </div>
</template>

<script>
import MyFooter from "../components/MyFooter.vue";
import Back1 from "../components/Back1.vue";
import axios from "axios";
export default {
  name: "BookDetail",
  components: {
    MyFooter,
    Back1
  },
  data() {
    return {
      url: "",
      title: "",
      name: "",
      text: "",
    };
  },
  created() {
    axios({
      url: "http://localhost:3000/books/" + this.$route.params.id,
    }).then((res) => {
      this.url = res.data.url;
      this.title = res.data.title;
      this.name = res.data.name;
      this.text = res.data.text;
    });
  },
};
</script>
<style scoped>
.myFooter {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10;
}
.Flex-page {
  display: flex;
  padding: 0rem 0.15rem;
  justify-content: space-between;
  flex-direction: column;
  color: white;
  background-image: linear-gradient(
      to top,
      rgba(201, 89, 29, 0.6),
      rgb(201, 89, 29) 56%
    ),
    url("https://img.duozhuayu.com/9890d7d667b411ecb3f65aab254c74ad.jpeg?x-oss-process=image/resize,w_450/quality,Q_80");
  background-size: cover, cover;
  background-position: center top, center center;
}
header {
  margin-top: 0.32rem;
  margin-bottom: 0.8rem;
}
header h1 {
  margin-bottom: 0.12rem;
  font-size: 0.3rem;
  font-weight: 500;
}
header h1 span {
  line-height: 1.6;
}
.recommend {
  margin-bottom: 0.3rem;
  align-items: center;
}
.recommend .s1 {
  vertical-align: middle;
  font-size: inherit;
}
.content {
  background-color: white;
  padding-bottom: 0.8rem;
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
}
.oc-item {
  margin-top: 0.3rem;
  border-bottom: 0.005rem solid rgb(242, 242, 242);
  position: relative;
}
.BookItem {
  margin-left: 0.16rem;
  border-bottom: none;
  display: flex;
}
.BookItem-image {
  width: 0.8rem;
  height: 1.2rem;
  position: relative;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 0.12rem;
}
.jsx-img {
  background-image: url(../../public/img/01.jpeg);
  box-shadow: rgba(0, 0, 0, 0.1) 0rem 0rem 0.08rem 0rem;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  display: block;
}
.info {
  display: flex;
  flex-direction: column;
}
.info h3 {
  margin-top: -0.1em;
  font-size: 0.18rem;
  font-weight: 500;
  margin-bottom: 0.06rem;
}
.info p {
  font-size: 0.12rem;
  color: rgb(170, 170, 170);
}

.info .score {
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  margin-top: 0.04rem;
  color: rgb(102, 102, 102);
  font-size: 0.12rem;
}
.info .score span {
  color: rgb(214, 186, 140);
}
.Book-description {
  position: relative;
}
.contrib-for-list {
  border-bottom: 0rem;
  padding: 0.16rem 0.16rem 0.26rem;
}
.contrib-for-list p {
  height: 1.2rem;
  position: relative;
  overflow: hidden;
  line-height: 1.6;
  font-size: 0.15rem;
  overflow-wrap: break-word;
  word-break: break-word;
}
.contrib-for-list p span {
  width: 6em;
  position: absolute;
  bottom: 0rem;
  right: 0rem;
  background: linear-gradient(
    to left,
    rgb(255, 255, 255),
    rgb(255, 255, 255) 45%,
    rgba(255, 255, 255, 0) 100%
  );
  text-align: right;
}
.contrib-for-list p span .Button {
  color: #497749;
  background: none;
  padding: 0;
  font-size: inherit;
  border: none;
  border-radius: 0;
}
.footer-recommend {
  display: flex;
  flex-direction: row;
  -webkit-box-align: center;
  align-items: center;
  margin-top: 1em;
  font-size: 0.14rem;
  color: rgb(170, 170, 170);
  white-space: nowrap;
  width: 100%;
}
.Flex-left {
  display: flex;
  align-items: center;
  flex: 1 1 0%;
  min-width: 0rem;
  margin-right: 0.04rem;
  color: rgb(170, 170, 170);
}
.Flex-left div {
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
}
.Flex-left div .small {
  flex-shrink: 0;
  width: 0.2rem;
  height: 0.2rem;
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  background: rgb(242, 242, 242);
  border: 0.01rem solid rgb(242, 242, 242);
  border-radius: 0.99rem;
  overflow: hidden;
}
.Flex-left div .small img {
  display: block;
  width: 100%;
}
.Flex-left div .small span {
  margin-left: 0.04rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.content div:nth-child(2) .jsx-img {
  background-image: url(../../public/img/02.jpeg);
  box-shadow: rgb(0 0 0 / 10%) 0rem 0rem 0.08rem 0rem;
}
.content div:nth-child(3) .jsx-img {
  background-image: url(../../public/img/03.jpeg);
  box-shadow: rgb(0 0 0 / 10%) 0rem 0rem 0.08rem 0rem;
}
</style>